<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Pisces</title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="css/app.css" rel="stylesheet" />
    	<style>
			.chart {
				height: 460px;
				margin: 0px;
				padding: 0px;
			}
			h5 {
				margin-top: 30px;
				font-weight: bold;
			}
			h5:first-child {
				margin-top: 15px;
			}
		</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">职业距离</h1>
		</header>
		<div class="mui-content">
		<div class="mui-content-padded">
			<h5>同性恋与其它职业的距离</h5>
			<div class="chart" id="barChart"></div>
			</div>
		</div>
			<script src="js/mui.min.js"></script>
			<script src="libs/echarts-all.js"></script>
			<script>
			var getOption = function(chartType) {
				var chartOption = chartType == 'pie' ? {} :{
					 color: [
            '#254483'
        ],
         tooltip: {
            'trigger': 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: function (params) {
                return '同性恋' + '与' + params[0].name + '的距离';
            },
        },
					legend: {
						show: false,
						data: ['同性恋']
					},
					grid: {
						x:'25%',
            y: '4%',
			width:'65%',
//          height: '820px',
			 borderWidth: '0',
					},
					calculable: false,
					yAxis: [{
						type: 'category',
						 axisLine: {
                    lineStyle: {
                        color: '#000',
                        width: 1,
                    },
                },
                axisLabel: {
                    interval: 'auto',
                },
				 splitLine: {
                    show: false,
                },
						data: ['计算机科学家', '小说家', '化学家', '间谍', '生物学家', '哲学家', '象棋运动员', '诗人', '厨师', '数学家', 'CEO', '物理学家', '建筑师', '演员', '无神论者', '同性恋',]
					}],
					xAxis: [{
						type: 'value',
//						name: '距离',
						 axisLine: {
                    lineStyle: {
                        color: '#000',
                        width: 1,
                    },
                },
				 splitLine: {
                    show: false,
                },
					}],
					series: [{
						name: '同性恋',
						type: chartType,
						  itemStyle: {
                    normal: {
                        label: {
                            show: true,
							 textStyle: {
                                color: '#000',
                            },
                        }
                    }
                },
						data: [4.94, 4.71, 4.57, 4.54, 4.37, 4.12, 3.59, 3.48, 3.13, 3.04, 2.94, 2.88, 2.61, 1.89, 1.59, 0]
					}]
				};
				return chartOption;
			};
			var byId = function(id) {
				return document.getElementById(id);
			};
			var barChart = echarts.init(byId('barChart'));
			barChart.setOption(getOption('bar'));
			</script>
</body>
</html>